<template>
    <l-page class="block pb-3">
        <l-navbar title="信用贷款额度测算"></l-navbar>
        <view class="panel shadow">
            <u-steps :current="setp">
                <u-steps-item title="身份">
                </u-steps-item>
                <u-steps-item title="信用资料"></u-steps-item>
                <u-steps-item title="测算结果"></u-steps-item>
            </u-steps>

        </view>
        <view class="panel shadow" v-if="setp == 0">
            <l-select label="贷款身份" :list="types.list" v-model="types.type"></l-select>
            <l-button class="mt-3" @tap="setp = 1">下一步</l-button>
        </view>
        <view class="panel shadow" v-if="setp == 1">
            <house v-if="types.type == 0"></house>
            <renovation v-if="types.type == 1"></renovation>
            <selfEmployed v-if="types.type == 2"></selfEmployed>
            <wageEarners v-if="types.type == 3"></wageEarners>
            <l-button class="mt-3" @tap="setp = 2">下一步</l-button>
            <l-button class="mt-3" type="error" @tap="setp = 0">上一步</l-button>
        </view>
        <view class="panel shadow" v-if="setp == 2 || setp == 3">
            <!-- 利息 -->
            <!-- 总额 -->
            <!-- 期数 -->
        </view>
    </l-page>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
// 有房
import house from './components/house.vue'
// 装修
import renovation from './components/renovation.vue'
// 自雇
import selfEmployed from './components/self-employed.vue'
// 工薪
import wageEarners from './components/wage-earners.vue'
let types = reactive(
    {
        list: [
            {
                label: '有房族',
                value: 0
            },
            {
                label: '工薪族',
                value: 1
            },
            {
                label: '自雇族',
                value: 2
            },
            {
                label: '住房装修',
                value: 3
            },
        ],
        type: 0
    }
)
let setp = ref(0)
</script>